<script setup lang="ts">
import { ref } from 'vue';

const isShow = ref(false)
const toggle = () => {
  isShow.value = !isShow.value
}
</script>

<template>
  <div class="app-page">
    <button @click="toggle">切换</button>
    <div v-show="isShow" class="box1">用v-show控制显示/隐藏</div>
    <div v-if="isShow" class="box2">用v-if控制显示/隐藏</div>
  </div>
</template>

<style lang="css" scoped>
.box1 {
  width: 400px;
  height: 200px;
  background-color: pink;
  margin-bottom: 20px;
}

.box2 {
  width: 400px;
  height: 200px;
  background-color: green;
}
</style>
